<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Geo</title>

<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" name="viewport"/>
<form name="geoform" action="." method="post">
{% csrf_token %} 
</form>

<script>
function handler(location) {
var message = document.getElementById("message");
message.innerHTML ="<img src='http://maps.google.com/staticmap?center=" + location.coords.latitude + "," + location.coords.longitude + "&size=300x200&maptype=hybrid&key=YOURGOOGLEAPIKEY' />";
message.innerHTML+="<p>Longitude: " + location.coords.longitude + "</p>";
message.innerHTML+="<p>Latitude: " + location.coords.latitude + "</p>";
var lngt = document.createElement('input');
lngt.setAttribute('name','longitude');
lngt.setAttribute('type','hidden');
lngt.setAttribute('value',location.coords.longitude);
document.geoform.appendChild(lngt);

var latt = document.createElement('input');
latt.setAttribute('name','latitude');
latt.setAttribute('type','hidden');
latt.setAttribute('value',location.coords.latitude);
document.geoform.appendChild(latt);

document.geoform.method = "post";
document.geoform.submit();
}
navigator.geolocation.getCurrentPosition(handler);
</script>
</head>
<body>
<div id="message">Location unknown</div>
</body>
</html>
